<template>
	<view class="page-root-bg">
		<view style="padding-top: 100rpx;display: flex;justify-content: space-evenly;">
			<view>
				<image src="/static/img/danghui.png" style="width: 106rpx;height: 113rpx;"></image>
			</view>
			<view>
				<image src="/static/img/guohui.png" style="width: 106rpx;height: 113rpx;"></image>
			</view>
			<view>
				<image src="/static/img/zhengxiehui.png" style="width: 106rpx;height: 113rpx;"></image>
			</view>
		</view>

		<view style="display: flex;justify-content: center;margin-top: -50rpx;">
			<image src="/static/img/login-title.png" style="width: 450rpx;" mode="aspectFit"></image>
		</view>
		<view class="login-box" style="margin-top: -50rpx;">
			<view class="form-container">
				<u-form labelPosition="left" :model="loginForm" :rules="rules" ref="uForm" v-if="loginType==0">
					<u-form-item label="" prop="phone" borderBottom>
						<u-input placeholder="请输入用户名" v-model="loginForm.phone" border="none"></u-input>
					</u-form-item>
					<u-form-item label="" prop="pwd" borderBottom>
						<u-input placeholder="请输入密码" v-model="loginForm.pwd" border="none"></u-input>
					</u-form-item>
				</u-form>
				<u-form labelPosition="left" :model="loginForm" :rules="rules1" ref="uForm" v-if="loginType==1">
					<u-form-item label="" prop="phone" borderBottom>
						<u-input placeholder="请输入手机号" v-model="loginForm.phone" border="none"></u-input>
					</u-form-item>
					<u-form-item label="" prop="smsCode" borderBottom>
						<view class="verification-code-container">
							<view class="input-container">
								<u--input placeholder="验证码" v-model="loginForm.smsCode" border="none"></u--input>
							</view>
							<view @click="getCode" class="codeBtn">
								{{ codeName }}
							</view>
						</view>
					</u-form-item>
				</u-form>
				<u-form labelPosition="left" :model="loginForm" :rules="rules2" ref="uForm" v-if="loginType==2">
					<u-form-item label="" prop="phone" borderBottom>
						<u-input placeholder="请输入手机号" v-model="loginForm.phone" border="none"></u-input>
					</u-form-item>

					<u-form-item label="" prop="smsCode" borderBottom>
						<view class="verification-code-container">
							<view class="input-container">
								<u--input placeholder="验证码" v-model="loginForm.smsCode" border="none"></u--input>
							</view>
							<view @click="getCode" class="codeBtn">
								{{ codeName }}
							</view>
						</view>
					</u-form-item>
					<u-form-item label="" prop="pwd" borderBottom>
						<u-input placeholder="密码" v-model="loginForm.pwd" border="none"></u-input>
					</u-form-item>
					<u-form-item label="" prop="pwdConfirm" borderBottom>
						<u-input placeholder="请输入确认密码" v-model="loginForm.pwdConfirm" border="none"></u-input>
					</u-form-item>
				</u-form>
			</view>
			<view class="footer">
				<button @click="loginClick">登录</button>
			</view>
		</view>
		<view style="padding: 0 30rpx;display: flex;justify-content: center;font-size: 26rpx;color:#303133">
			<view v-if="loginType==2">
				<text @click="loginType=1">验证码登录</text>
				<text @click="loginType=0" style="margin-left: 10rpx;">账号登录</text>
			</view>
			<view v-else>
				<text v-if="loginType==0" @click="loginType=1">验证码登录</text>
				<text v-if="loginType==1" @click="loginType=0">账号登录</text>
				<text @click="loginType=2" style="margin-left: 10rpx;">找回密码</text>
			</view>
		</view>
		<u-loading-page :loading="loading"></u-loading-page>

	</view>
</template>

<script>
	import {
		requestGet,
		requestPost,
		setToken
	} from "@/util/means/request";
	import {
		GET_LOGIN_SMS_CODE,
		SMS_LOGIN,
		GET_LOGIN_UPDATEPWD,
		GET_LOGIN_PWD,
		GET_LOGIN_UPDATE_SMS_CODE
	} from "@/api/login";
	import {
		initUserInfo
	} from "@/service/user";
	import {
		baseMixins
	} from "@/util/baseMixins";
	import {
		indexPage
	} from "@/util/publicConfig";

	export default {
		mixins: [baseMixins],
		data() {
			return {
				loading: false,
				loginType: 0, //0账号密码 1 验证码 2找回密码
				rules: {
					phone: [{
						required: true,
						message: '请输入用户名',
						trigger: ['blur', 'change']
					}],
					pwd: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}]
				},
				rules1: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '手机号格式不正确',
							trigger: ['blur', 'change']
						}
					],
					smsCode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}]
				},
				rules2: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^1[3456789]\d{9}$/,
							message: '手机号格式不正确',
							trigger: ['blur', 'change']
						}
					],
					smsCode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}],
					pwd: [{
						required: true,
						message: '请输入新密码',
						trigger: ['blur', 'change']
					}],
					pwdConfirm: [{
						required: true,
						message: '请输入确认密码',
						trigger: ['blur', 'change']
					}]
				},
				loginForm: {
					phone: '',
					smsCode: '',
					pwd: '',
					pwdConfirm: ''
				},
				clock: '',
				countdown: 60,
				codeName: '获取验证码',
			}
		},
		methods: {
			getCode() {
				if (this.loginForm.phone == '') {
					uni.$u.toast('请输入手机号码')
					return
				}
				if (this.codeName == '获取验证码') {
					const params = {
						phone: this.loginForm.phone
					}
					requestGet({
						url: this.loginType == 1 ? GET_LOGIN_SMS_CODE : GET_LOGIN_UPDATE_SMS_CODE,
						data: params
					}).then(res => {
						uni.$u.toast('获取验证码成功')
					})
					this.codeName = this.countdown + 's';
					this.clock = setInterval(this.doLoop, 1000); //一秒执行一次
				}
			},
			loginClick() {
				let owner = this
				this.$refs.uForm.validate().then(() => {
					owner.loading = true
					if (this.loginType == 1) {
						requestPost({
							url: SMS_LOGIN,
							data: owner.loginForm
						}).then(async res => {
							const accessToken = res?.token || 'simulateToken'
							setToken(accessToken)
							try {
								await initUserInfo()
								owner.redirectToPage(indexPage)
							} catch (e) {
								owner.loading = false
							}
						}).catch(err => {}).finally(() => {
							owner.loading = false
						})
					} else if (this.loginType == 2) {
						requestPost({
							url: GET_LOGIN_UPDATEPWD,
							data: owner.loginForm
						}).then(async res => {
							const accessToken = res?.token || 'simulateToken'
							setToken(accessToken)
							try {
								await initUserInfo()
								owner.redirectToPage(indexPage)
							} catch (e) {
								owner.loading = false
							}
						}).catch(err => {}).finally(() => {
							owner.loading = false
						})
					} else if (this.loginType == 0) {
						requestPost({
							url: GET_LOGIN_PWD,
							data: owner.loginForm
						}).then(async res => {
							const accessToken = res?.token || 'simulateToken'
							setToken(accessToken)
							try {
								await initUserInfo()
								owner.redirectToPage(indexPage)
							} catch (e) {
								owner.loading = false
							}
						}).catch(err => {}).finally(() => {
							owner.loading = false
						})
					}
				})
			},
			doLoop() {
				this.countdown--;
				if (this.countdown > 0) {
					this.codeName = this.countdown + 's';
				} else {
					clearInterval(this.clock);
					this.codeName = '获取验证码';
					this.countdown = 120; //重置时间
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-root-bg {
		width: 100vw;
		height: 100vh;
		background: url('/static/img/login-bg.png');
		background-size: 100% 100%;
	}

	.login-box {
		margin: 30rpx;
		background-color: $bg-color-white;
		border-radius: $border-radius-lg;
		padding: 30rpx 0;
		width: calc(100% - 60rpx);

		.form-container {
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;

			.uni-forms-item {
				margin-bottom: 10rpx !important;
			}
		}

		.verification-code-container {
			display: flex;
			width: 100%;
			justify-content: space-between;

			.input-container {
				width: 60%;
			}

			.codeBtn {
				width: 30%;
				height: 50rpx;
				padding: 10rpx 20rpx;
				display: flex;
				box-sizing: border-box;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				color: #FFFFFF !important;
				background: #ad2325 !important;
			}
		}


		.footer {
			height: 120rpx;
			padding: 10rpx 20rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			// background-color: #FFFFFF;
			// z-index: 10;
			// box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

			button {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				color: #FFFFFF !important;
				background: #ad2325 !important;
			}
		}
	}

	::v-deep .is-input-border {
		border: 0 solid #dcdfe6;
		border-bottom: 1px solid #dcdfe6;
		border-radius: 0;
	}
</style>